<script setup>
import InfoChart from "../components/Infochart.vue";

import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";

//更新当前页面城市数据
//pinia
import { storeToRefs } from "pinia";

import { useCityList } from "@/stores/cityList";

const cityListmanager = useCityList();

const {isCurrentCityInList } = storeToRefs(cityListmanager);

const { updataCurrentCity } = cityListmanager;

const weatherInfo = ref({});
const todayWeather = ref({});

// 加载中
const loading = ref(true);

// 引入api
import { getWeatherByAdcode } from "@/apis";
// 获取路由参数
const route = useRoute();
onMounted(async () => {
  // updataCurrentCity(...route.query); //这里不能展开参数，否则会报错？
  const { adcode, cityName } = route.query;
  // 更新当前页面的城市数据
  updataCurrentCity(adcode, cityName);
  // 根据adcode获取天气信息
  const data = await getWeatherByAdcode(adcode);
  weatherInfo.value = data.forecasts[0];
  todayWeather.value = weatherInfo.value.casts[0];
  loading.value = false;
});
</script>

<template>
  <template v-if="loading">
    <p class="text-center mt-4 text-2xl">天气信息加载中...</p>
  </template>
  <template v-else>
    <div class="bg-weather-second p-2 text-center">
      你正在预览{{ weatherInfo.city }}的天气信息
      <span v-if="!isCurrentCityInList"
        >，可以通过右上角的"+"号按钮保存起来</span
      >
    </div>
    <div class="weather-info flex flex-col text-center mt-6 gap-4">
      <h1>当日气温是：{{ todayWeather.daytemp }}摄氏度</h1>
      <h1>当日天气是：{{ todayWeather.dayweather }}</h1>
      <h1>当日风向是：{{ todayWeather.daywind }}风</h1>
      <h1>当日风力是：{{ todayWeather.daypower }}级</h1>
    </div>
  </template>
  <hr class="border-white border-opacity-10 mt-6" />
  <div class="weather-chart">
    <InfoChart :data="weatherInfo.casts"></InfoChart>
  </div>
</template>